<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好易购商城注册页面</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/drag.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<style>
 .uspan1{
 	color:red;
 }
 .uspan2{
 		color:green;
 }
</style>
</head>
<body>
	<div class="wrap">
		<div class="banner-show" id="js_ban_content">
			<div class="cell bns-01">
				<div class="con"></div>
			</div>
			<div class="cell bns-02" style="display: none;">
				<div class="con">
					<a href="javascript:void(0);" target="_blank" class="banner-link">
						<i>好易购商城</i>
					</a>
				</div>
			</div>
			<div class="cell bns-03" style="display: none;">
				<div class="con">
					<a href="javascript:void(0);" target="_blank" class="banner-link">
						<i>好易购商城</i>
					</a>
				</div>
			</div>
		</div>
		<div class="banner-control" id="js_ban_button_box">
			<a href="javascript:;" class="left">左</a> <a href="javascript:;"
				class="right">右</a>
		</div>
		<script type="text/javascript">
			;
			(function() {

				var defaultInd = 0;
				var list = $('#js_ban_content').children();
				var count = 0;
				var change = function(newInd, callback) {
					if (count)
						return;
					count = 2;
					$(list[defaultInd]).fadeOut(400, function() {
						count--;
						if (count <= 0) {
							if (start.timer)
								window.clearTimeout(start.timer);
							callback && callback();
						}
					});
					$(list[newInd]).fadeIn(400, function() {
						defaultInd = newInd;
						count--;
						if (count <= 0) {
							if (start.timer)
								window.clearTimeout(start.timer);
							callback && callback();
						}
					});
				}

				var next = function(callback) {
					var newInd = defaultInd + 1;
					if (newInd >= list.length) {
						newInd = 0;
					}
					change(newInd, callback);
				}

				var start = function() {
					if (start.timer)
						window.clearTimeout(start.timer);
					start.timer = window.setTimeout(function() {
						next(function() {
							start();
						});
					}, 8000);
				}

				start();

				$('#js_ban_button_box').on('click', 'a', function() {
					var btn = $(this);
					if (btn.hasClass('right')) {
						//next
						next(function() {
							start();
						});
					} else {
						//prev
						var newInd = defaultInd - 1;
						if (newInd < 0) {
							newInd = list.length - 1;
						}
						change(newInd, function() {
							start();
						});
					}
					return false;
				});

			})();

			function submitForm() {
				$("#registForm").submit();
			}
		</script>


		<form id="registForm" action="ZhuCe.do" method="post" onsubmit="return checkAll()">
			<div class="container">
				<div class="register-box">
					<div class="reg-slogan">新用户注册</div>
					<div class="reg-form" id="js-form-mobile">
					
					<div class="cell" style="margin-bottom:5px">
					<input type="text"	 
							name="name" id="uname" required="required"  placeholder="请输入用户名" class="text" >
							
							</div>
							<div style="width:80px; height:15px"><span id="uspan"></span></div>
							
						
						<div class="cell" style="margin-bottom:5px; margin-top:5px;" >
						<input type="password" name="upass" id="upass" placeholder="请输入密码" class="text">
						
							
						</div>
						<div style="width:80px; height:15px"><span id="pspan"></span></div>
						
						<div class="cell" style="margin-bottom:5px; margin-top:5px;">
						<input type="password" name="upass1" id="upass1" placeholder="请重新输入密码" class="text">
						</div>
						<div style="width:80px; height:15px"><span id="pspan1"></span></div>
							
						<div class="cell" style="margin-bottom:5px; margin-top:5px;">
						<input type="text"	
							name="phone" id="phone" maxlength="11" required="required" placeholder="请输入手机号" class="text" >
							</div>
						
						<div style="margin-top: 5px;line-height: 30px;  font-size: 16px;" >
						<input type="radio" name="sex" value="男">男 <input
							type="radio" name="sex" value="女">女
						</div>
						<div style="line-height: 30px;font-size: 14px;">
						<select name="province" id="uprovice" style="width:145px;">
							<option value="-1">请选择</option>
						</select> <select name="city" id="ucity" style="width:145px;">
							<option value="-1">请选择</option>
						</select>
						</div>
						<br>
					<div class="bottom" style="margin-left: 90px; margin-top: 2px;">
						<input type="submit" value="提交" class="button btn-green" style="width:150px;  height: 35px;  line-height: 35px;">
					</div>
					</div>

				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
	var checkname=false;
	var checkpass=false;
	var checkpass1=false;
/* 		$(document).ready(function() {
			FancyForm.setup();
		}); */
		
		$(function(){
			$("#uname").on("blur",function(){
				var uname = $("#uname").val();
				var uspan = $("#uspan").val();
				var reg = /^[a-z0-9A-Z]{4,10}$/;
				var b = reg.test(uname);
				if(b){
					$.get({
						url:"../Register.do",
						data:{"uname":uname},
						success:function(result,statue,xhr){
							if(result=="false"){
								$("#uspan").html("可以使用") .attr("class","uspan2") ;
								checkname = true;
							}else{
								$("#uspan").html("用户名已存在") .attr("class","uspan1") ;
							}
						},
						dataType:"text"
					})
				}else{
					$("#uspan").html("不符合规则") .attr("class","uspan1");
				}
			});
			$("#upass").on("blur",function(){
				var upass = $("#upass").val();
				reg = /^[a-z0-9A-Z]{6,}$/;
				if(reg.test(upass)){
					 $("#pspan").html("可以使用").attr("class","uspan2");
					   checkpass = true;	
				}else{
					 $("#pspan").html("密码格式不对").attr("class","uspan1");
				}
			});
			$("#upass1").on("blur",function(){
				var upass1=$("#upass1").val();
				var upass=$("#upass").val();
				if(upass1==upass){
					 $("#pspan1").html("和密码一致").attr("class","uspan2");
					 checkpass1=true;
					 
				}else{
					 $("#pspan1").html("和密码不一致").attr("class","uspan1");
				}
			})
		})
		function checkAll(){
			var s = (checkname && checkpass&&checkpass1);
			return s;
		}
		/* sheng */
 		$(function(){
			$.ajax({
				url:"../Prov.do",
				dataType:"json",
				success:function(result){
					$.each(result,function(index,s){
						$("#uprovice").append("<option value="+s.id+','+s.area+">"+s.area+"</option>");
					})
				}
			})
 		})
 		
				/* shi*/
	$(function(){
		$("#uprovice").on("change",function(){
			var pid= $("#uprovice").val();
			if(pid!=-1){
				$("#ucity").html("<option value=-1>请选择</option>");
				$.ajax({
					url:"../Country.do",
					data:{"proc":pid},
					method:"post",
					dataType:"json",
					
					success:function(result){
						console.log(result);
						$.each(result,function(index,s){
							$("#ucity").append("<option value="+s.id+','+s.area+">"+s.area+"</option>");
						})
					}
				})
			}
		
		})
	})
	</script>

</body>
</html>
